<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        position: relative;
        left: 0;
        top: 100px;
        cursor: pointer;
    }
    .item{
        width: 5%;
        height: 30px;
        background: tomato;
        text-align: center;
        line-height: 1.5;
        color: white;
        font-size: 20px;
        position: absolute;
        left: -40px;
    }
    .con{
        width: 5%;
        height: 30px;
        background: tomato;
        text-align: center;
        line-height: 1.5;
        color: white;
        font-size: 16px;
        position: absolute;
        top: 35px;
        left: -100px;
    }
</style>
<body>
    <div class="box">
        <div class="item">≡</div>
        <div class="con">问题反馈</div>
    </div>
    <script>
        var box = document.querySelector('.box');
        var item = document.querySelector('.item');
        var con = document.querySelector('.con');
        box.addEventListener('mouseenter',function () {
            animate(con,0);
            animate(item,0);
        });
        box.addEventListener('mouseleave',function f() {
            animate(con,-100);
            animate(item,-40);
        });

        function animate(obj,target,callback) {      //封装成函数可以多次调用
            clearInterval(obj.tiems);   /*每次点击按钮时都会清除一次动画防止出现BUG*/
            obj.tiems = setInterval(function () {
                var temp = (target - obj.offsetLeft) / 10;  /*缓动动画 利用（目标值 - 现在的位置） / 10*/
                temp = temp > 0 ? Math.ceil(temp) : Math.floor(temp);
                if (obj.offsetLeft == target) {
                    clearInterval(obj.tiems);
                    if (callback) {
                        callback();   //结束的时候判断是否有回调函数有的话就会执行
                    }
                }
                obj.style.left = obj.offsetLeft + temp + 'px';
            },15)
        }
    </script>
</body>
</html>